{% extends 'layout/manage.html' %}
{% block css %}

{% endblock %}
{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">图表</div>
        <div class="panel-body">
            <div class="col-lg-6">
                <div id="pie" style="width: 600px;height:400px;"></div>
            </div>
            <div class="col-lg-6">
                <div id="pillar" style="width: 600px;height:400px;"></div>
            </div>
        </div>

    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function () {
            pie();
            pillar();

        })

        function pie() {
            var myChart = echarts.init(document.getElementById('pie'));

            // 指定图表的配置项和数据
            option = {
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: 335,
                                name: '直接访问'
                            },
                            {
                                value: 234,
                                name: '联盟广告'
                            },
                            {
                                value: 1548,
                                name: '搜索引擎'
                            }
                        ]
                    }
                ]
            };
            $.ajax({
                url: "/pie",
                type: "get",
                datatype: "json",
                success: function (res) {
                    option.series[0].data = res.data
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })
        }

        function pillar() {
            var myChart2 = echarts.init(document.getElementById('pillar'));

            // 指定图表的配置项和数据
            option2 = {
                xAxis: {
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        data: [23, 24, 18, 25, 27, 28, 25]
                    }
                ]
            };
            $.ajax({
                url: "/pillar",
                type: "get",
                datatype: "json",
                success: function (res) {
                    option2.series[0].data = res.sdata
                    option2.xAxis.data = res.xdata
                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option2);
                }
            })
        }

        // 基于准备好的dom，初始化echarts实例
    </script>
{% endblock %}